import { Link } from 'react-router-dom';
import { Component } from 'react'
import instance from '../utils/axios';
import tool from '../utils/format'


class Home extends Component {
    state = {
        nav: ['军事', '财经', 'NBA', '汽车', '文化', '股票', '时政'],
        idx: 0, // 第几个nav高亮 ,
        list: [],
        page: 1
    }

    handleScroll(e) {
        const { scrollTop, scrollHeight, clientHeight } = e.target;
        if (scrollTop + clientHeight > scrollHeight - 1) {
            console.log("on");
            this.setState({
                page: this.state.page + 1
            }, () => {
                instance.post("news", { type: this.state.nav[this.state.idx], page: this.state.page }).then(
                    (res) => {
                        let arr = this.state.list.concat(res)
                        console.log(arr);
                        this.setState({
                            list: arr
                        });
                    }, (err) => {
                        console.log(err);
                    })
            })
            console.log(this.state.page);

        }
    }

    getList() {
        instance.post("news", { type: this.state.nav[this.state.idx] }).then(
            (res) => {
                // let info = data.data
                // info.map(item => arr.push(item))
                this.setState({
                    list: res
                });
            }, (err) => {
                console.log(err);
            });
    }


    componentDidMount() {
        this.getList();
    }

    render() {

        const nav = this.state.nav.map((item, index) => {
            return <li onClick={() => {
                this.setState({
                    idx: index,
                    page: 1
                }, () => { this.getList() });
            }} className={index === this.state.idx ? 'cur' : ''} key={index}><a>{item}</a></li>;
        });

        return (
            <>
                <div className="head">
                    <div className="nav">
                        <ul>
                            {nav}
                        </ul>
                    </div>
                    <div className="search">
                        <Link className="s_btn" to="/search"></Link>
                    </div>
                </div>

                <div className="content" onScroll={(e) => { this.handleScroll(e); }}>
                    <ul>

                        {this.state.list.map((item) => {
                            if (item.type === '财经') {
                                return (
                                    <li key={item._id} onClick={() => {
                                        this.props.history.push('/newsinfo/' + item._id);
                                    }}>
                                        <div className="info">
                                            <div className="title">{item.title}</div>
                                            <div className="something">
                                                <span className="m_r10">{item.media}-{item.type}</span>
                                                <span>{tool.toYMD(item.pubtime)}</span>
                                            </div>
                                        </div>
                                        <div className="img">
                                            {item.img && item.img !== "none" ? <img src={item.img} /> : <div className="noimg">暂无缩略图</div>}
                                        </div>
                                    </li>
                                );
                            } else {
                                return (
                                    <li key={item._id} onClick={() => {
                                        this.props.history.push('/newsinfo/' + item._id);
                                    }}>
                                        <div className="info">
                                            <div className="title">{item.title}</div>
                                            <div className="something">
                                                <span className="m_r10">{item.source}-{item.type}</span>
                                                <span>{tool.toYMD(item.time)}</span>
                                            </div>
                                        </div>
                                        <div className="img">
                                            <img src={item.img} />
                                        </div>
                                    </li>
                                );
                            }
                        })}

                    </ul>
                </div>
            </>)
    }


}

export default Home